import { defineComponent, computed, ref } from 'vue'
import { useStore } from 'vuex'
import './style.scss'
import UploadImg from '@/components/uploadImg/index'
import { staticFilePath } from '@/utils/config'

export default defineComponent({
  setup () {
    const store = useStore()
    const userInfo = computed({
      get: () => {
        return store.state.userInfo
      },
      set: (val) => {
        userInfo.value.picture = val
      }
    })
    const uploadLoading = ref(false)

    const updatePicture = (res: any) => {
      userInfo.value = staticFilePath + res.data.url
    }

    return () => {
      return <el-card class="userinfo-page-wrapper">
        <div class="picture-opt-box">
          <div class="picture-wrapper">
            <img src={userInfo.value.picture} alt=""/>
          </div>
          <UploadImg onSussess={(res: any) => { updatePicture(res) }}
            onStart={() => { uploadLoading.value = true }}
            onEnd={() => { uploadLoading.value = false }}>
            <el-button loading={uploadLoading.value} type="primary">修改头像</el-button>
          </UploadImg>
        </div>
      </el-card>
    }
  }
})
